<template>
  <div>
    <div
      v-if="device === 'desktop'"
      class="dswd-recruitment-second"
    >
      <div class="second-wrap">
        <div class="job-wrap">
          <ul class="job-content">
            <template v-for="item in jobList">
              <li :key="'job' + item.id" class="job-item">
                <div class="job-brief-info" @click="expandList(item)">
                  <div class="left">
                    <div class="job-name">{{ item.jobs }}</div>
                    <div class="job-type">{{ item.type | typeFilter }}</div>
                    <div class="job-city">
                      <span v-if="item.city!==null&&item.city!==''">{{ item.city | cityFilter }}</span><span v-if="item.exp!==null&&item.exp!==''"> | {{ item.exp }}</span><span v-if="item.degree!==null&&item.degree!==''"> | {{ item.degree }}</span></div>
                  </div>
                  <div class="right">
                    <div class="job-apply">
                      <span
                        class="job-apply-button"
                        @click.stop="applyJob"
                      >申请职位</span>
                    </div>
                    <div class="job-release-time">
                      发布日期：{{ item.updateTime | dataFilter }}
                    </div>
                  </div>
                </div>
                <div v-if="item.expand" class="job-detail-content">
                  <div class="job-desc">岗位职责：</div>
                  <br>
                  <p
                    class="detail-content"
                    v-html="item.jobContent.replace(/\r?\n/g, '<br />')"
                  />
                  <br>
                  <br>
                  <div class="job-desc">岗位要求：</div>
                  <br>
                  <p
                    class="detail-content"
                    v-html="item.jobRequest.replace(/\r?\n/g, '<br />')"
                  />
                </div>
              </li>
            </template>
          </ul>
          <div class="job-pagination">
            <el-pagination
              layout="total, prev, pager, next, jumper"
              :current-page="page.pageNum"
              :page-size="page.pageSize"
              :total="page.total"
              @current-change="currentChange"
            />
          </div>
        </div>
        <div class="rush-hire">
          <div class="rush-hire-title">急聘岗位</div>
          <div class="rush-hire-wrap">
            <ul class="rush-hire-content">
              <template v-for="item in hireTypeList">
                <li
                  :key="'type' + item.code"
                  class="condition-item"
                  @click="typeChange(item)"
                >
                  <span class="item-name">{{ item.name }}</span>
                </li>
              </template>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="device === 'mobile'|| device === 'ipad'"
      class="dswd-m-recruitment-second"
    >
      <div class="second-wrap">
        <div class="job-wrap">
          <ul class="job-content">
            <template v-for="item in jobList">
              <li :key="'job' + item.id" class="job-item">
                <div class="job-brief-info" @click="expandList(item)">
                  <div class="left">
                    <div class="job-name">{{ item.jobs }}</div>
                    <div class="job-type">{{ item.type | typeFilter }}</div>
                    <div class="job-city"><span v-if="item.city!==null&&item.city!==''">{{ item.city | cityFilter }}</span><span v-if="item.exp!==null&&item.exp!==''"> | {{ item.exp }}</span><span v-if="item.degree!==null&&item.degree!==''"> | {{ item.degree }}</span></div>
                  </div>
                  <div class="right">
                    <div class="job-apply">
                      <span
                        class="job-apply-button"
                        @click.stop="applyJob"
                      >申请职位</span>
                    </div>
                    <div class="job-release-time">
                      发布日期：{{ item.updateTime | dataFilter }}
                    </div>
                  </div>
                </div>
                <div v-if="item.expand" class="job-detail-content">
                  <div class="job-desc">岗位职责：</div>
                  <br>
                  <p
                    class="detail-content"
                    v-html="item.jobContent.replace(/\r?\n/g, '<br />')"
                  />
                  <br>
                  <br>
                  <div class="job-desc">岗位要求：</div>
                  <br>
                  <p
                    class="detail-content"
                    v-html="item.jobRequest.replace(/\r?\n/g, '<br />')"
                  />
                </div>
              </li>
            </template>
          </ul>
          <div class="job-pagination">
            <el-pagination
              layout="total, prev, pager, next, jumper"
              :current-page="page.pageNum"
              :page-size="page.pageSize"
              :total="page.total"
              @current-change="currentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { mapState } from 'vuex'
let self
export default {
  components: {},
  data() {
    return {
      hireTypeList: [
        {
          id: '1',
          name: '建筑工程师',
          code: 'AE'
        },
        {
          id: '2',
          name: '程序员',
          code: 'PG'
        }
      ],
      page: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      jobList: []
    }
  },
  computed: {
    ...mapState({
      device: (state) => state.app.device
    })
  },
  beforeCreate() {
    self = this
  },
  props: {
    filters: {
      type: Object,
      default: () => {}
    },
    cityList: {
      type: Array,
      default: () => []
    },
    typeList: {
      type: Array,
      default: () => []
    }
  },
  filters: {
    typeFilter(typeCode) {
      let resultText = ''
      for (const item of self.typeList) {
        if (typeCode === item.code) {
          resultText = item.name
        }
      }
      return resultText
    },
    cityFilter(cityCode) {
      let resultText = ''
      for (const item of self.cityList) {
        if (cityCode === item.code) {
          resultText = item.name
        }
      }
      return resultText
    },
    dataFilter(time) {
      return time !== null ? moment(time).format('YYYY-MM-DD') : ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getJobList()
    })
  },
  methods: {
    typeChange(item) {
      this.filters.type = item.code
      this.getJobList()
    },
    currentChange(val) {
      this.page.pageNum = val
      this.getJobList()
    },
    getJobList() {
      const jobList = []
      this.$api.job
        .selectJobsList({
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize,
          params: { ...this.filters, delFlag: 0 }
        })
        .then((res) => {
          if (res.code === 200) {
            this.page.total = res.data.total
            if (
              res.data.list &&
              res.data.list !== null &&
              res.data.list.length > 0
            ) {
              for (const item of res.data.list) {
                item.expand = false
                jobList.push(item)
              }
            }
          }
          this.jobList = jobList
        })
    },
    expandList(item) {
      for (const newItem of this.jobList) {
        if (item.id === newItem.id) {
            newItem.expand = !item.expand
        } else {
            newItem.expand = false
        }
      }
    },
    applyJob() {
      console.log('申请职位')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/recruitment/second.scss";
</style>